<template>
	<view class="container">
		<!-- 电池列表 -->
		<!-- 		<view class="battery">
			<view class="battery_item" :class="item_id == item.id ? 'active' : ''" v-for="(item, index) in list" :key="item.id">
				<image v-if="item.use_state == 0" src="/static/img/index/true.png" mode="widthFix"></image>
				<image v-if="item.use_state == 1" src="/static/img/index/false.png" mode="widthFix"></image>
				{{ item.item_code }}
			</view>
		</view> -->
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(255,255,255,0.5)"
				indicator-active-color="#ffffff" :autoplay="true" style="height: 256rpx;">
				<swiper-item v-for="(item, index) in banner" :key="index" @click="navigatorPage(item)">
					<image style="width: 100%; height: 256rpx;" mode="scaleToFill" :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="guanggao" @click="toMember">
			<image src="https://feiyu.bigchun.com/gxfuban/20250712/35f508013b173a8f13d5b94b32629dac.png" mode=""></image>
		</view>
		<!-- 新电池样式 -->
		<view class="battery-wrap">
			<view class="top s-flex-r-b-c">
				<view class="tit">
					选择租借设备
				</view>
				<view class="">
					<image @click="go('/pages/index/index')" class="icon" src="/static/img/status/home.png"
						mode="widthFix"></image>
					<image @click="go('/pages/user/user')" style="margin-left: 28rpx;" class="icon"
						src="/static/img/status/avatar.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="cont s-flex-c-s-c">
				<view class="name">
					电池加浮板
				</view>
				<view class="box s-flex-r-s-c">
					<image class="icon" src="/static/img/status/lan.png" mode="widthFix"></image>
					<image class="icon" src="/static/img/status/hong.png" mode="widthFix" style="margin-left: 16rpx;">
					</image>
				</view>
			</view>
		</view>
		<!-- 计价规则 -->
		<view class="rule">
			<view class="rule-title">
				计费规则
			</view>
			<view class="valuation" v-for="(item, index) in mentInfo.cacl_rule" :key="index">{{ item }}</view>
			<view class="" style="padding:10upx 20upx 20upx;text-align: left;">{{ mentInfo.yajin_rule }}</view>
		</view>

		<!-- 底部按钮begin -->
		<!-- 没有手机号，显示 取用 一个按钮 -->
		<view class="btn" v-if="false">
			<!-- #ifdef MP-WEIXIN -->
			<!-- <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="btn-blue">手机号授权</button> -->
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<!-- <button open-type="getAuthorize" @getAuthorize="getPhoneInfo" @error="onAuthError" scope="phoneNumber" class="btn-blue">手机号授权</button> -->
			<!-- #endif -->
		</view>
		<!-- 有手机号，有订单 显示 取用（倒计时） 归还 两个按钮 -->
		<view class="getReturn" v-if="isLogin && isOrder && isPhone">
			<button class="dep-btn btn2" v-if="getLoading">取用</button>
			<button v-else type="default" class="get" style="width: 80%;" @click="get" :disabled="isBtn" :class="{ btn2: isBtn == true }">
				取用
				<text v-if="isBtn">({{ timer }}s)</text>
			</button>
			<!-- <button type="default" class="return" @click="toHuan">归还</button> -->
		</view>

		<!-- 有手机号，无订单 显示 取用 一个按钮 -->
		<view class="dep-box" v-if="isLogin && !isOrder && isPhone && isShowDep">
			<view class="dep-con" v-if="CanUseType==1">
				<button @click="judge" class="dep-btn" >免押金租借</button>
				<view class="dep-tip">
					<image src="../../static/img/user/zhifufen.png" mode="widthFix"></image>
					<text>微信支付分 | 550分及以上优享</text>
				</view>
			</view>
			<view class="dep-con" v-if="CanUseType==0">
				<button v-if="is_deposit==0" @click="navToDeposit" class="dep-btn">在线支付押金</button>
				<block v-else>
					<button class="dep-btn btn2" v-if="getLoading">取用</button>
					<button @click="judge" class="dep-btn " v-else>取用</button>
				</block>
			</view>
		</view>
		<view class="miandan" @click="toFree">
			<image src="/static/img/active/miandan.png" mode=""></image>
			<span>{{mentInfo.activity_count || '0'}}</span>
		</view>
		<!-- 底部按钮end -->
		<!-- 订单列表弹出层 -->
		<view class="mask" v-if="order" @click="excel">
			<scroll-view scroll-y="true" class="order" @click.stop="!excel">
				<view class="list_item" v-for="(item, index) in orderList" :key="index">
					<view class="left">
						<view class="img">
							<image src="/static/img/detail/Battery.png" mode="widthFix"></image>
						</view>
						<view class="item_l">
							<text v-if="item.is_pay == 0">使用中</text>
							<text v-if="item.is_pay == 1">{{ item.use_time }}</text>
							<view>
								<text class="tip">{{ item.device_item_code }}</text>
								<text class="tip">{{ item.device_info_code }}</text>
							</view>
							<text class="time">{{ item.start_time_date }}</text>
						</view>
					</view>
					<view class="item_r huan" v-if="item.is_end == 0" @click="getReturn(item.order_id)">归还</view>
					<view class="item_r toPay" v-if="item.is_end == 1" @click="toDetail(item.order_sn)">未支付</view>
				</view>
			</scroll-view>
		</view>

		<!-- 未登录提示框 -->
		<view class="mask" v-if="!isLogin">
			<view class="login">
				<view class="bgc">
					<image class="bgc_img" src="/static/img/index/login-bgc.png" mode="widthFix"></image>
					<image class="img_login" src="/static/img/index/login.png" mode="widthFix"></image>
				</view>
				<view class="btn_login">
					<view class="tit">您还没有登录</view>
					<view class="tips">登录即刻开启快乐生活</view>

					<!-- #ifdef MP-WEIXIN -->
					<button @click="bindgetuserinfo" class="btn1">立即登录</button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button @click="bindAuthorizeinfo" @error="onAuthError">立即登录</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<uni-popup ref="colorPopup" :mask-click="false">
			<view class="colorPopup">
				<image src="/static/img/active/popupBg.png" class="popupBg" mode=""></image>
				<view class="titleBox">
					<view class="close"></view>
					<view class="title">请选择浮板颜色</view>
					<image src="/static/img/index/close.png" @click="closeTips" class="close" mode=""></image>
				</view>
				<view class="colorList">
					<view class="colorItem" v-for="(item,index) in colorList"
						:style="{background:backgroundColor(item.colour)}" :key="index"
						@click="selectColor = item.colour">
						<view class="label">{{item.colour}}</view>
						<image src="../../static/image/Subtract.png" v-if="selectColor == item.colour" class="icon">
						</image>
					</view>
				</view>
				<view class="returnButton">
					<view class="button"  v-if="CanUseType==1" @click="payscore">确定</view>
					<view class="button"  v-if="CanUseType==0" @click="getBattery">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupDeposit">
			<view class="dep-box-popup">
				<image src="../../static/image/yajin.jpg" class="yajin"></image>
				<view class="dep-con"><button @click="navToDeposit" class="dep-btn">在线支付押金</button></view>
			</view>
		</uni-popup>
		<uni-popup ref="activePopup" :mask-click="false">
			<view class="activeTips">
				<image src="../../static/img/active/popupBg.png" class="popupBg" mode=""></image>
				<view class="titleBox">
					<view class="close"></view>
					<view class="title">活动提醒</view>
					<image src="../../static/img/index/close.png" @click="closeActiveTips" class="close" mode="">
					</image>
				</view>
				<view class="activeProcess" v-if="activeInfo=='free'">
					免单活动进行中
				</view>
				<view class="activeProcess" v-if="activeInfo=='card'">
					次卡活动进行中
				</view>
				<view class="activeButton">
					<view class="button2" @click="navigatorActive">了解活动</view>
					<view class="button1" @click="closeActiveTips">继续</view>
				</view>
			</view>
		</uni-popup>
		<!-- 错误提示框-->
		<view class="mask" v-if="error">
			<view class="pay">
				<view class="tit">温馨提示</view>
				<view class="con" v-html="msg"></view>
				<view class="button">
					<button type="default" class="exit btn2" v-if="countDown >0">{{countDown}}s确定</button>
					<button type="default" class="exit" @click="close" v-else>确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wxLogin,
		isusezhifufen,
		getBattery,
		payList,
		getMent,
		ment,
		isdeposit,
		backBattery,
		apilyLogin,
		wxgetPhone,
		apilygetPhone,
		isOrder,
		wxScorePay,
	} from '../../api/api.js';
	import {
		getout,
		getColorList
	} from '../../api/equip.js';
	import {
		getCardList,
		getActivityList
	} from "@/api/active.js"
	export default {
		data() {
			return {
				banner: [
					{
						image: 'https://feiyu.bigchun.com/gxfuban/20250712/6e2981fbea23483c57792a131fbfa5b4.png',
						path: '/pages/active/free',
					},
					{
						image: 'https://feiyu.bigchun.com/gxfuban/20250712/4757b299400e0fe9b277046c4c62bcc1.png',
						path: '/pages/active/coupon',
					}
				],
				colorList: [],
				selectColor: '',
				isGet: false,
				huan: false,
				error: false,
				isNormal: true,
				CanUseType: 1, //1=使用支付分免押金  0使用押金充值支付
				isPhone: true,
				countDown: '',
				msg: '该设备取用配比已达上限，请使用其他设备。',
				order: false, //是否显示订单列表弹出层
				isOrder: false,
				code: '',
				isLogin: false,
				is_deposit: 0, // 是否支付押金 1支付 0未支付
				timer: 5,
				isBtn: false,
				list: [],
				orderList: [],
				intervalPay: '',
				item_id: '',
				isGetBattery: false, //点击取用按钮，取用按钮是否置灰
				wxpay: [],
				mentInfo: {}, //设备详情
				isShowDep: true, //是否显示底部押金按钮
				isPopDep: false, //是否押金弹窗
				isAutoJudge: false,
				getLoading: false,
				activeList: [], //免单活动列表
				cardList: [], //次卡活动列表
				activeInfo: null, //活动信息
				parentId: ''
			};
		},
		onLoad(options) {
			// 通过支付宝扫码进入
			// #ifdef MP-ALIPAY
			let url = decodeURIComponent(uni.getStorageSync('alipayUrl'));
			if (url) {
				this.code = url.split('=')[1];
			}
			// #endif
			// 通过微信的扫设备码进入
			console.log(options, 'options.q');
			if (options.q) {
				let obj = {};
				let code = decodeURIComponent(options.q);
				console.log(code, 'codecode');
				if (code.indexOf('?') != -1) {
					let index = code.indexOf('?');
					code = code.substring(index + 1, code.length);
					code = code.split('&');
					code.forEach(v => {
						let arr = v.split('=');
						obj[arr[0]] = arr[1];
					});
					console.log(obj, 'objobjobj');
					this.code = obj.code;
					this.parentId = obj.parent_user_id;
				}
			}
			// 通过微信的扫代理端的码进入
			if (options.code) {
				console.log(options, 'options.q');
				this.code = options.code;
				this.parentId = options.parent_user_id;
			}
			// 通过首页扫码进入
			if (options.rcode) {
				this.code = options.rcode;
			}

			let token = uni.getStorageSync('token');
			let phone = uni.getStorageSync('user').mobile;
			let phone1 = uni.getStorageSync('user').ali_mobile;
			if (token) {
				this.isLogin = true;
				this.getCanUseType();
			}
			if (phone) {
				this.isPhone = true;
			}
			if (phone1) {
				this.isPhone = true;
			}
			this.getMentDetail();
			this.getConfig();
		},
		onShow() {
			if (uni.getStorageSync('isAutoJudge') == 1) {
				this.isAutoJudge = 1;
				uni.removeStorageSync('isAutoJudge')
			}
			if (this.isLogin) {
				this.order = false;
				payList().then(res => {
					const data = res.data.filter(item => item.is_end == 1);
					if (data.length > 0) {
						uni.showModal({
							title: '提示',
							content: '您有未支付的订单，请先去进行支付后在进行取用！',
							showCancel: false,
							confirmText: "去支付",
							success: (showres) => {
								if (showres.confirm) {
									uni.navigateTo({
										url: '/pages/detail/detail?order_sn=' + res.data[0]
											.order_sn
									});
								} else if (showres.cancel) {
									return;
								}
							}
						})
					} else {
						// this.order = true
						// this.isOrder = true;
						// this.orderList = res.data;
					}
				});
				this.getOrder();
				// this.getPayList();
			}
			// this.openIntervalPay();
		},
		onHide() {
			this.clearIntervalPay();
		},
		onUnload() {
			this.clearIntervalPay();
		},
		methods: {
			closeTips() {
				this.$refs.colorPopup.close()
				this.selectColor = ""
				this.getLoading = false;
				uni.hideLoading()
			},
			toMember() {
				uni.switchTab({
					url:'/pages/active/numCard'
				})
			},
			toFree() {
				uni.navigateTo({
					url:'/pages/user/detail/free'
				})
			},
			backgroundColor(color) {
				if (color == "红") {
					return "#ff2323"
				} else if (color == "黄") {
					return "#f9d724"
				} else if (color == "蓝") {
					return "#3eb9ff"
				}
			},
			navigatorPage(item) {
				uni.navigateTo({
					url: item.path + "?venues_id=" + this.mentInfo.venues_id
				})
			},
			go(url) {
				uni.navigateTo({
					url,
				})
			},
			// 获取取用条件类型 支付分 和押金
			getCanUseType() {
				isusezhifufen().then(res => {
					this.CanUseType = res.data.state
				});
			},
			calculation() {
				let mentInfo = JSON.stringify(this.mentInfo);
				uni.navigateTo({
					url: `/pages/ment/calculation?mentInfo= ${mentInfo}`
				});
			},
			openIntervalPay() {
				// 五秒钟查询一次订单状态
				this.intervalPay = setInterval(() => {
					if (this.isLogin) {
						this.getPayList();
					}
				}, 5000);
			},
			clearIntervalPay() {
				if (this.intervalPay) {
					clearInterval(this.intervalPay);
				}
			},
			// 微信登录授权
			bindgetuserinfo() {
				uni.getUserProfile({
					desc: '正在获取',
					success: info => {
						uni.login({
							success: res => {
								let data = {
									rawData: info.rawData,
									code: res.code,
									iv: info.iv
								};
								wxLogin(data).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											title: '授权成功'
										});
										this.isLogin = true;
										uni.setStorageSync('user', res.data.userInfo);
										uni.setStorageSync('token', res.data.userInfo
											.token);
										// 判断是否有手机号
										let phone = uni.getStorageSync('user').mobile;
										if (phone) {
											this.isPhone = true;
										}
										// 判断是否支付押金
										this.getOrder();
										this.getCanUseType();
									}
								});
							}
						});
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			// 微信获取手机号
			onGetPhoneNumber(e) {
				if (!uni.getStorageSync('user').mobile && e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						success: res => {
							wxgetPhone({
								code: res.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										icon: 'none',
										title: '获取手机号成功'
									});
									this.isPhone = true;
								}
							});
						}
					});
				} else {
					// console.log(e, '用户点击了拒绝');
				}
			},
			// 支付宝登录授权
			bindAuthorizeinfo() {
				my.getAuthCode({
					scopes: ['auth_user'],
					success: res => {
						apilyLogin({
							authCode: res.authCode
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '授权成功'
								});
								this.isLogin = true;
								uni.setStorageSync('user', res.data.userinfo);
								uni.setStorageSync('token', res.data.userinfo.token);
								// 判断是否有手机号
								let phone1 = uni.getStorageSync('user').ali_mobile;
								if (phone1) {
									this.isPhone = true;
								}
								// 判断是否支付押金
								this.getOrder();
							}
						});
					}
				});
			},
			openCountDown() {
				let timer = null
				let num = 5;
				this.countDown = 5
				timer = setInterval(() => {
					if (num == 1) {
						clearInterval(timer)
						this.countDown = 0;
						this.go("/pages/index/index")
					} else {
						this.countDown = num
						num--
					}
				}, 1000)
			},
			// 支付宝获取手机号
			getPhoneInfo() {
				my.getPhoneNumber({
					scopes: 'auth_user',
					success: res => {
						var resData = JSON.parse(res.response);
						apilygetPhone({
							encrypt: resData.response
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '获取手机号成功'
								});
								this.isPhone = true;
							}
						});
					},
					fail: res => {}
				});
			},
			onAuthError(e) {
				console.log(e);
			},
			// 获取是否支付押金
			getOrder() {
				isdeposit().then(res => {
					this.is_deposit = res.data.is_deposit;
					if (this.isAutoJudge == 1 && this.is_deposit == 1) {
						this.judge()
					}
				});
			},
			// 获取电池列表
			getMentDetail() {
				let that = this
				getMent({
					code: this.code
				}).then(res => {
					if (res.data.state == 0) {
						this.error = true;
						this.msg = '该设备已离线，请使用其他设备。';
					} else {
						this.mentInfo = res.data;


						this.getColorList(res.data.code)

						// this.getActivityList()
						// this.getCardList()
						// setTimeout(() => {
						// 	that.activeInfo = that.getActiveInfo()
						// 	that.$refs.activePopup.open('center')
						// }, 2000)

						this.list = res.data.device_item;
						if (this.list.findIndex(i => i.use_state == 0) == -1) {
							this.isNormal = false;
						}
					}
				});
			},
			closeActiveTips() {
				this.$refs.activePopup.close()
			},
			navigatorActive() {
				if (this.activeInfo == 'free') {
					return uni.navigateTo({
						url: '/pages/active/free?venues_id=' + this.mentInfo.venues_id
					})
				}
				if (this.activeInfo == 'card') {
					return uni.navigateTo({
						url: '/pages/active/numCard?venues_id=' + this.mentInfo.venues_id
					})
				}
			},
			//获取免费单活动列表
			getActivityList() {
				getActivityList({
					venues_id: this.mentInfo.venues_id
				}).then(res => {
					this.activeList = res.data
				})
			},
			isCurrentTimeInRange(data) {
				// 获取当前时间  
				const now = new Date();
				const currentHour = now.getHours();
				const currentMinute = now.getMinutes();

				// 遍历数组中的每一项数据  
				for (const item of data) {
					// 将starttime和endtime字符串转换为小时和分钟  
					const [startHour, startMinute] = item.starttime.split(':').map(Number);
					const [endHour, endMinute] = item.endtime.split(':').map(Number);
					// 检查当前时间是否在starttime和endtime之间  
					if (currentHour === startHour && currentMinute >= startMinute ||
						currentHour > startHour && currentHour < endHour ||
						currentHour === endHour && currentMinute <= endMinute) {
						this.activity_id = item.id
						if (item.receive >= item.quantity) {
							return false
						} else {
							return 'free';
						}
					}
				}
				// 没有找到匹配的时间范围  
				return false;
			},
			//获取活动信息
			getActiveInfo() {
				if (this.activeList.length == 0 && this.cardList.length == 0) {
					return false
				}
				if (this.activeList.length == 0 && this.cardList.length > 0) {
					return 'card'
				}
				if (this.activeList.length > 0 && this.cardList.length == 0) {
					let isExpire = this.isCurrentTimeInRange(this.activeList)
					return isExpire
				}
				if (this.activeList.length > 0 && this.cardList.length > 0) {
					let isExpire = this.isCurrentTimeInRange(this.activeList)
					if (isExpire) {
						return isExpire
					} else {
						return 'card'
					}
				}
			},
			getCardList() {
				getCardList({
					venues_id: this.mentInfo.venues_id
				}).then(res => {
					this.cardList = res.data
				})
			},
			getColorList(code) {
				getColorList({
					code
				}).then(res => {
					this.colorList = res.data
				})
			},
			// 订阅信息
			dingyueComfirm(tmplId, callback) {
				wx.showModal({
					title: '订阅消息',
					content: '亲，请同意飞鱼浮会向您发送订单信息！。',
					success: res => {
						if (res.confirm) {
							wx.requestSubscribeMessage({
								tmplIds: [tmplId],
								success: res => {
									if (res[tmplId] === 'accept') {
										wx.showToast({
											title: '订阅成功！',
											icon: 'success'
										})
										if (callback) {
											callback()
										}
									} else if (res[tmplId] == 'reject') {
										//引导用户，手动引导用户点击按钮，去设置页开启，## Modals是自定义组件
										wx.showModal({
											title: '订阅消息',
											content: '您当前拒绝接受消息通知，是否去开启',
											confirmText: '开启授权',
											confirmColor: '#345391',
											cancelText: '仍然拒绝',
											cancelColor: '#999999',
											success(res) {
												if (res.confirm) {
													console.log('用户点击确定')
													wx.openSetting({
														success(res) {
															console.log(res
																.authSetting
															)
														},
														fail(err) {
															//失败
															console.log(err)
														}
													})
												} else if (res.cancel) {
													console.log('用户点击取消')
													if (callback) {
														callback()
													}
												}
											}
										})
									}
								},
								fail(err) {
									//失败
									console.log(err)
								}
							})
						} else {
							console.log('提示：用户拒绝订阅消息')
							if (callback) {
								callback()
							}
						}
					}
				})
			},
			// 底部按钮，取用
			get() {
				const that = this;
				const tmplId = 'XVlMKriAnLAOERVa5r85_OYky5LXtXYgyE0HfenXA-8'
				that.auditSubscriptionsSetting(tmplId, () => {
					if (!that.isNormal) {
						that.error = true;
						that.msg = '该设备暂无使用电池，请选择其他设备';
						return;
					}
					// 判断没有支付押金
					if (that.is_deposit == 0) {
						// 判断是否为微信，支付宝走原来的逻辑
						// #ifdef MP-WEIXIN
						that.$refs.popupDeposit.open();
						// #endif
						// #ifdef MP-ALIPAY
						uni.showToast({
							icon: 'none',
							title: '请支付押金'
						});
						setTimeout(() => {
							that.navToDeposit();
						}, 500);
						// #endif
						return;
					}
					that.selectColor()
					// that.judge();
				})
			},
			judge() {
				let that = this;
				if (that.getLoading) {
					return;
				}
				that.getLoading = true;
				isOrder().then(res => {
					if (res.data.is_order == 1) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: res => {
								if (res.confirm) {
									that.getLoading = true;
									if(that.CanUseType==1){
										that.payscore()
									}
									if(that.CanUseType==0){
										that.getBattery()
									}
									// this.$refs.colorPopup.open();
								} else if (res.cancel) {
									this.getLoading = false;
									return;
								}
							}
						});
					} else if (res.data.is_order == 0) {
						that.getLoading = true;
						if(that.CanUseType==1){
							that.payscore()
						}
						if(that.CanUseType==0){
							that.getBattery()
						}
						// this.$refs.colorPopup.open();
					}
				}).catch(() => {
					this.getLoading = false;
				})
			},
			// 跳转到押金支付
			navToDeposit() {
				const that = this;
				const tmplId = 'XVlMKriAnLAOERVa5r85_OYky5LXtXYgyE0HfenXA-8'
				this.auditSubscriptionsSetting(tmplId, () => {
					that.$refs.popupDeposit.close();
					uni.navigateTo({
						url: `/pages/deposit/deposit?isAutoJudge=1&code=${that.code}&parentId=${that.parentId}`
					});
				})
				// uni.requestSubscribeMessage({
				// 	tmplIds: ['XVlMKriAnLAOERVa5r85_OYky5LXtXYgyE0HfenXA-8'],
				// 	success(res) {
				// 		console.log(res)
				// 		uni.navigateTo({
				// 			url: `/pages/deposit/deposit?isAutoJudge=1&code=${that.code}`
				// 		});
				// 	}
				// })
			},
			payscore() {
				if (wx.openBusinessView) {
					uni.showLoading({
						mask:true,
						title:"支付中..."
					})
					wxScorePay({
						code: this.code,
						parent_user_id: this.parentId
					}).then(res => {
						console.log(res.data.length, res.data.is_pay, 'resseee');
						if (res.data.length == 0) {
							this.wxpay = [];
						} else if (res.data.is_pay && res.data.is_pay == 'false') {
							this.getBattery();
						} else {
							console.log('sseeeeee');
							this.wxpay = res.data;
							wx.openBusinessView({
								businessType: 'wxpayScoreUse',
								extraData: {
									mch_id: this.wxpay.mch_id,
									package: this.wxpay.package,
									timestamp: this.wxpay.timestamp,
									nonce_str: this.wxpay.nonce_str,
									sign_type: this.wxpay.sign_type,
									sign: this.wxpay.sign
								},
								envVersion: 'release',
								success: res => {
									console.log(res.extraData.appid)
									console.log(res.extraData.query_id)
									if (res.extraData.appid && res.extraData.query_id) {
										this.getBattery();
									} else {
										this.CanUseType = 0
										if(this.is_deposit==0){
											this.$refs.popupDeposit.open();
										}
									}
								},
								fail: (err) => {
									this.CanUseType = 0
									if(this.is_deposit==0){
										this.$refs.popupDeposit.open();
									}
								},
								complete: () => {
									this.$refs.colorPopup.close()
									this.getLoading = false;
									uni.hideLoading()
								}
							});
						}
					});
				}
			},
			getBattery() {
				// 清除轮询
				// if (!this.selectColor) {
				// 	return uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择浮板颜色'
				// 	});
				// }
				this.clearIntervalPay();
				uni.showLoading({
					title: "请等待...",
					mask: true
				})
				this.getLoading = true;
				let pamars = {}
				if (this.CanUseType == '1') {
					pamars = {
						is_zhifufen: this.CanUseType,
						code: this.code,
						order_type: 1,
						colour: this.selectColor
					}
				} else {
					pamars = {
						is_zhifufen: this.CanUseType,
						code: this.code,
						order_type: 0,
						colour: this.selectColor
					}
				}
				getout(pamars).then(res => {
					this.getLoading = false;
					uni.hideLoading()
					if (res.code == 1) {
						this.error = true;
						this.openCountDown()
						this.msg =
							`<span class='title'> 电池：${res.data.item_code_battery} 柜门已打开`;
						this.huan = true;
						this.isGet = true;
						this.item_id = res.data.id;
						// this.isGetBattery = false;
						// this.getPayList();
						this.getMentDetail();
						// this.openIntervalPay();
					}
				}).finally(error => {
					this.$refs.colorPopup.close()
					this.selectColor = ""
					this.getLoading = false;
					uni.hideLoading()
				})
			},
			// 订单弹出层，归还电池
			getReturn(order_id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '请在柜子上面操作，点击还操作进行归还！',
					showCancel: false,
					success(res) {
						// if (res.confirm) {
						// 	backBattery({
						// 		order_id: order_id,
						// 		code: that.code
						// 	}).then(res => {
						// 		console.log('归还电池');
						// 		console.log(res);
						// 		if (res.code == 1) {
						// 			that.error = true;
						// 			that.msg = '柜门已打开，请归还';
						// 			that.huan = true;
						// 			that.getPayList();
						// 		}
						// 	});
						// } else if (res.cancel) {
						// 	// console.log('用户点击取消');
						// }
					}
				});
			},
			// 订单列表
			getPayList() {
				payList().then(res => {
					if (res.data.length == 0) {
						this.isOrder = false;
					} else {
						// this.order = true
						this.isOrder = true;
						this.orderList = res.data;
					}
				});
			},

			//底部按钮 归还
			toHuan() {
				this.order = true;
			},
			excel(e) {
				this.order = false;
			},
			close() {
				this.error = false;
				uni.switchTab({
					url: '/pages/index/index'
				});
				// if (this.huan) {
				// 	this.isOrder = true;
				// } else {
				// 	uni.reLaunch({
				// 		url: '/pages/index/index'
				// 	});
				// }
				// if (this.isGet) {
				// 	this.isBtn = true;
				// 	let timer1 = setInterval(() => {
				// 		this.timer--;
				// 		if (this.timer == -1) {
				// 			clearInterval(timer1);
				// 			this.timer = 5;
				// 			this.isGet = false;
				// 			this.isBtn = false;
				// 		}
				// 	}, 1000);
				// }
			},
			toDetail(order_sn) {
				uni.navigateTo({
					url: '/pages/detail/detail?order_sn=' + order_sn
				});
			},
			getConfig() {
				ment().then(res => {
					uni.setStorageSync('config', res.data);
				});
			},
			auditSubscriptionsSetting(tmplId, callback) {
				const that = this;
				wx.getSetting({
					withSubscriptions: true,
					success(res) {
						console.log(res)
						if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
							if (
								res.subscriptionsSetting.itemSettings &&
								res.subscriptionsSetting.itemSettings[tmplId]
							) {
								let item = res.subscriptionsSetting.itemSettings[tmplId]
								if (item == 'reject') {
									console.log('提示：用户拒绝订阅消息')
									that.dingyueComfirm(tmplId, callback)
								} else if (item == 'accept') {
									console.log('提示：您已经开启订阅消息')
									if (callback) {
										callback()
									}
								} else if (item == 'ban') {
									console.log('提示：您已经被后台封禁')
									if (callback) {
										callback()
									}
								}
							} else {
								console.log('提示：用户没有勾选订阅消息或者没有状态')
								that.dingyueComfirm(tmplId, callback)
							}
						} else {
							console.log('提示：订阅消息主开关没打开')
							that.dingyueComfirm(tmplId, callback)
						}
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.activeTips {
		width: 650rpx;
		height: 520rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;
		background-color: #FFFFFF;
		position: relative;

		.popupBg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.titleBox {
			position: relative;
			z-index: 1;
			height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				flex: 1;
				text-align: center;
			}

			.close {
				width: 27rpx;
				height: 27rpx;
				margin: 0 38rpx;
			}
		}

		.activeProcess {
			margin: 90rpx auto;
			text-align: center;
			position: relative;
			z-index: 1;
			font-size: 40rpx;
			font-weight: bold;
		}

		.activeButton {
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			z-index: 1;

			.button1,
			.button2 {
				width: 270rpx;
				height: 100rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

			.button1 {
				// background: #FF6E30;
				background: #3EB9FF;
			}

			.button2 {
				background: #C2C2C2;
			}

			// .active {
			// 	background: #3EB9FF;
			// }
		}
	}

	.colorPopup {
		width: 650rpx;
		height: 520rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;
		background-color: #FFFFFF;
		position: relative;

		.popupBg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.titleBox {
			position: relative;
			z-index: 1;
			height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				flex: 1;
				text-align: center;
			}

			.close {
				width: 27rpx;
				height: 27rpx;
				margin: 0 38rpx;
			}
		}

		.colorList {
			margin: 20rpx;
			display: flex;
			position: relative;
			justify-content: center;

			.colorItem {
				width: 176rpx;
				height: 244rpx;
				margin: 0 20rpx;
				line-height: 244rpx;
				text-align: center;
				color: #ffffff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				position: relative;

				.icon {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		.returnButton {
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			z-index: 1;

			.button {
				width: 100%;
				height: 100rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
				background: #3EB9FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	}

	.container {
		width: 100%;
		//height: calc(100% - 10upx);
		// padding-top: 20rpx;
		background-color: #f6f6f6;
		padding-bottom: 160upx;
	}

	.battery-wrap {
		width: calc(100% - 60upx);
		background-color: #ffffff;
		margin: 0 auto;
		margin-bottom: 16rpx;
		padding-bottom: 10rpx;

		.top {
			padding: 24rpx 18rpx 30rpx;

			.tit {
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				line-height: 47rpx;
				text-align: left;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.cont {
			width: 274rpx;
			height: 300rpx;
			box-sizing: border-box;
			background: #F6F6F6;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			border: 1rpx solid #74ABC9;
			padding: 8rpx 10rpx 20rpx;

			.name {
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
				line-height: 40rpx;
				margin-bottom: 40rpx;
			}

			.box {
				.icon {
					width: 118rpx;
					height: 190rpx;
				}
			}
		}
	}

	.battery {
		width: calc(100% - 60upx);
		height: 900upx;
		margin: 0 auto;
		display: flex;
		flex-flow: column;
		flex-wrap: wrap;

		.battery_item {
			background-color: #ffffff;
			box-sizing: border-box;
			width: 33.33%;
			height: 178upx;
			border: 1upx solid #f6f6f6;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 25%;
			}

			&.active {
				background-color: rgba(62, 185, 255, 0.5);
			}
		}
	}

	.getReturn {
		width: calc(100% - 60upx);
		height: 90upx;
		position: fixed;
		bottom: 50upx;
		left: 30upx;
		display: flex;
		justify-content: space-around;

		button {
			width: 40%;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			color: #ffffff;
			border-radius: 45upx;
		}

		.get {
			background-color: #3fb8ff;
		}

		.return {
			background-color: #fb8200;
		}
	}

	.btn2 {
		background-color: #c0c0c0 !important;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.pay {
			width: 580upx;
			min-height: 340upx;
			padding: 10upx 30upx 30upx;
			background: #ffffff;
			border-radius: 12px;
			position: relative;

			.tit {
				width: 100%;
				text-align: center;
				margin: 30upx auto 30upx;
			}

			.con {
				width: 80%;
				margin: 0 auto;
				color: #666;
				text-align: center;
			}

			.button {
				margin-top: 45upx;
				display: flex;
				justify-content: center;

				button {
					width: 200upx;
					height: 88upx;
					line-height: 88upx;
					background: #3eb9ff;
					border-radius: 44upx;
					border: 1upx solid #f2f2f2;
					color: #fff;
				}
			}
		}

		.login {
			width: 600upx;
			height: 625upx;
			background: #ffffff;
			border-radius: 20upx;

			.bgc {
				width: 100%;
				height: 285upx;
				position: relative;

				.bgc_img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}

				.img_login {
					width: 116upx;
					height: 134upx;
					position: absolute;
					top: calc(50% - 67upx);
					left: calc(50% - 58upx);
				}
			}

			.btn_login {
				width: 90%;
				margin: 30upx auto 0;
				text-align: center;

				.tit {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 34upx;
					margin-top: 50upx;
				}

				.tips {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 26upx;
					margin: 30upx 0;
				}

				button {
					width: 100%;
					height: 80upx;
					background: #3199ff;
					box-shadow: 0upx 8upx 12upx 6upx rgba(0, 101, 196, 0.16);
					border-radius: 40upx;
					color: #ffffff;
					font-size: 32upx;
					line-height: 80upx;
				}

				.exit {
					margin: 30upx 0;
				}
			}
		}
	}

	.order {
		width: 580upx;
		height: 300upx;
		padding: 10upx 30upx 30upx;
		background: #ffffff;
		border-radius: 12px;
		position: relative;

		.list_item {
			width: 100%;
			height: 150upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #f7f7f7;

			.left {
				display: flex;
				align-items: center;

				.img {
					width: 80upx;
					height: 80upx;
					background-color: #d8efff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20upx;

					image {
						width: 50upx;
					}
				}

				.item_l {
					height: 80%;
					display: flex;
					font-size: 28upx;
					flex-direction: column;
					justify-content: space-around;

					.time {
						color: #999999;
						font-size: 24upx;
					}

					.tip {
						color: #999999;
						font-size: 24upx;
						margin-right: 10upx;
					}
				}
			}

			.item_r {
				width: 130upx;
				height: 54upx;
				border-radius: 27px;
				font-size: 26upx;
				font-weight: 500;
				text-align: center;
				line-height: 54upx;
			}

			.huan {
				background-color: #f5f5f5;
				color: #666666;
			}

			.toPay {
				background-color: #d8efff;
				color: #3eb9ff;
			}
		}
	}

	.rule {
		//top: 90upx;
		width: 90%;
		//position: fixed;
		//height: 300upx;
		bottom: 160upx;
		text-align: center;
		color: #999999;
		font-size: 26upx;
		background-color: #ffffff;
		border-radius: 30upx;
		margin: 20upx auto;
		padding-left: 18rpx;

		// left: 50%;
		// transform: translateX(-50%);
		.rule-title {
			padding-top: 26rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			line-height: 38rpx;
			margin-bottom: 20rpx;
			text-align: left;
		}

		.valuation {
			padding: 10upx 20upx 0 0;
			text-align: left;
			// color: #3eb9ff;
			font-size: 28upx;
			//margin-bottom: 12upx;
		}

		.clear {
			width: 90%;
			height: 90upx;
			background-color: #3eb9ff;
			border-radius: 45upx;
			margin: 0 auto;
			text-align: center;
			color: #ffffff;
			line-height: 90upx;
			font-size: 32upx;
		}
	}

	.dep-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		box-sizing: border-box;

		.dep-title {
			text-align: center;
			line-height: 100rpx;
		}

		.dep-con {
			padding: 30rpx;

			.dep-tip {
				margin: auto;
				margin-top: 10rpx;
				color: #666;
				padding: 0 30rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;

				image {
					margin-right: 10rpx;
					width: 30rpx;
				}
			}

			.dep-btn {
				width: 80%;
				height: 88upx;
				line-height: 88upx;
				background: #3eb9ff;
				border-radius: 44upx;
				border: 1upx solid #f2f2f2;
				box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.18);
				color: #fff;

				text {
					font-size: 24rpx;
				}
			}

			.dep-btn2 {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				border: #3eb9ff;
				color: #3eb9ff;
				border-radius: 44upx;
				border: 1upx solid #f2f2f2;
				margin-bottom: 20rpx;

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.dep-box-popup {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		text-align: center;

		.yajin {
			height: 340rpx;
			width: 340rpx;
			margin: 40rpx;
		}

		.dep-title {
			text-align: center;
			line-height: 100rpx;
		}

		.dep-con {
			padding: 30rpx;

			.dep-tip {
				margin-top: 10rpx;
				color: #666;
				padding: 0 30rpx 30rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				image {
					margin-right: 10rpx;
					width: 30rpx;
				}
			}

			.dep-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				background: #3eb9ff;
				border-radius: 44upx;
				border: 1upx solid #f2f2f2;
				color: #fff;

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.btn-blue {
		width: 90%;
		margin: auto;
		height: 88upx;
		line-height: 88upx;
		background: #3eb9ff;
		border-radius: 44upx;
		border: 1upx solid #f2f2f2;
		color: #fff;
	}
	.miandan{
		position: fixed;
		bottom: 160px;
		right: 10px;
		width: 55px;
		height: 46px;
		span{
			position: absolute;
			right: 0;
			top: 0;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #E84029;
			color: #fff;
			text-align: center;
			line-height: 20px;
		}
		image{
			width: 100%;
			height: 100%;
		}
	}
	.guanggao{
		image{
			width: 92%;
			height: 100px;
			margin: 30rpx auto;
			display: block;
		}
	}
</style>